<template>
  <div class="app-container">
    <el-card class="card">
      <head-card slot="header" @click="handleClickOperation" />
      <body-card :treeData="treeDepartmentData" @click="handleClickOperation" />
    </el-card>
    <dep-dialog
      ref="dialogRef"
      :managerOptions="employeesSimpleList"
      :showDialog.sync="showDialog"
      :departmentData="departmentData"
      :node="node"
      @confirm="handleCUDepartment"
    />
  </div>
</template>

<script>
import {
  getCompanyDepartmentAPI,
  getEmployeesSimpleListAPI,
  createDepartmentAPI,
  deleteDepartmentAPI,
  updateDepartmentAPI,
  getDepartmentDetailsAPI,
} from "@/api/departments";
import  msgTip  from "@/utils/message-tip";
import tranTree from "@/utils/format-to-tree";
import HeadCard from "./components/Head.vue";
import BodyCard from "./components/Body.vue";
import DepDialog from "./components/Dialog.vue";
export default {
  data() {
    return {
      treeDepartmentData: [], //树形部门数据
      departmentData: [], //扁平部门数据（用于部门新增、修改规则校验）
      employeesSimpleList: [],
      departMentId: undefined,
      type: "", //CRUD操作 （del：删除 add：新增 edit：更新）
      showDialog: false, //弹窗显示
      title: "", //弹窗显示标题
      node:{},//当前操作的部门
    };
  },
  created() {
    this.getCompanyDepartment(); //获取公司部门
    this.getEmployeesSimpleList(); //获取员工简单列表
  },
  components: {
    HeadCard,
    BodyCard,
    DepDialog,
  },

  methods: {
    //获取公司部门
    async getCompanyDepartment() {
    
      const { data } = await getCompanyDepartmentAPI();
  
      this.treeDepartmentData = tranTree(data.depts);//扁平数据转树形数据
      this.departmentData = data.depts;
    },
    //获取员工简单列表
    async getEmployeesSimpleList() {
      const { data } = await getEmployeesSimpleListAPI();
      this.employeesSimpleList = data;
    },
    //点击操作区菜单 获取点击部门id、CRUD操作
    handleClickOperation({node,type}) {
      this.departMentId = node.id;
      this.node=node
      this.type = type;
      const CRUD_operation = {
        //CRUD操作 （del：删除 add：新增 edit：更新）
        del: () => {
          this.hanldeDeleteDepartment(node.name); //删除部门
        },
        add: () => {
          this.showDialog = true;
        },
        edit: () => {
          this.getDepartmentDetails(this.departMentId); //获取部门详情回显
        },
      };

      CRUD_operation[this.type]();
    },
    //点击弹窗确定按钮===判断部门操作 （新增、更新）
    handleCUDepartment(form) {
      this.type === "add"
        ? this.hanldeCreateDepartment(form)//新增部门
        : this.hanldeUpDateDepartment(form);//更新部门
    },
    //新增部门
    async hanldeCreateDepartment(form) {
      form.pid = this.departMentId;
      const res = await createDepartmentAPI(form);
      msgTip({ msg: res.message });
      this.getCompanyDepartment(); //刷新公司部门信息
      this.$refs.dialogRef.closeDialog(); //关闭弹窗、表单重置
    },
    //更新部门
    async hanldeUpDateDepartment(form) {
      const res = await updateDepartmentAPI(form);
      msgTip({ msg: res.message });
      this.getCompanyDepartment(); //刷新公司部门信息
      this.$refs.dialogRef.closeDialog(); //关闭弹窗、表单重置
    },
    //获取部门详情
    async getDepartmentDetails(id) {
      const { data } = await getDepartmentDetailsAPI(id);
      this.$refs.dialogRef.form = data; //表单回显
       this.showDialog = true;//显示弹窗
    },
    //删除部门
    hanldeDeleteDepartment(title) {
      this.$confirm(`删除${title}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteDepartmentAPI(this.departMentId);
          msgTip({ msg: res.message });
          this.getCompanyDepartment(); //刷新公司部门信息
        })
        .catch(() => {});
    },
  },
};
</script>


<style lang="scss" scoped>
.card {
  padding: 0 40px;
}
</style>